<template>
	<view>
		<view class="u-p-30 bg-white filter-panel-search">
			<view class="u-flex">
				<view class="u-flex-1">
					<u-search v-model="key" placeholder="搜索可回收物" :show-action="false" shape="square" clearabled @change="getList"></u-search>
				</view>
				<view class="u-p-l-30">
					<button size="mini" @click="createProduct" class="u-h-64" style="display: block;">
						<view class="u-flex u-align-items u-justify-content u-h-60">
							<u-icon name="plus" size="28" class="u-tips-color"></u-icon>
							<text class="u-p-l-10 u-tips-color">新建</text>
						</view>
					</button>
				</view>
			</view>
		</view>
		<!-- <view class="u-p-30">
			<u-button><u-icon name="plus"></u-icon><text class="u-p-l-10">添加可回收物</text></u-button>
		</view> -->
		<view class="table-list">
			<view class="tr u-border-bottom">
				<view class="th"><text>可回收物</text></view>
				<view class="th u-text-center" v-if="typeId == 0"><text>归属类型</text></view>
				<view class="th u-text-center"><text>排序</text></view>
				<view class="th u-text-center"><text>是否启用</text></view>
				<view class="th u-text-right"><text>操作</text></view>
			</view>
			<view 
				class="tr u-border-bottom"
				v-for="(item,index) in list"
				:key="index"
				:class="item.usestate == '已冻结'?'none':''"
			>
				<view class="td">
					<view class="u-flex">
						<!-- <image :src="item.icon?fileURL+item.icon:'/static/images/noImg.png'" class="img u-m-r-15"></image> -->
						<view>
							<view><text>{{item.name}}</text></view>
						</view>
					</view>
				</view>
				<view class="td u-text-center" v-if="typeId == 0">
					<text>{{item.typename}}</text>
				</view>
				<view class="td u-text-center">
					<text>{{item.sort}}</text>
				</view>
				<view class="td u-text-center">
					<!-- <text class="u-font-24">{{item.usestate}}</text> -->
					<u-switch v-model="item.state" size="40" @change="switchState($event, item)"></u-switch>
				</view>
				<view class="td u-text-right">
					<text class="links u-font-24" @click.stop="edit(item)">编辑</text>
					<text class="divider"></text>
					<text class="links u-font-24" @click.stop="del(item.id)">删除</text>
				</view>
			</view>
		</view>
		
		<!-- 新建与编辑可回收物 -->
		<!-- <u-modal 
			v-model="show" 
			:show-cancel-button="true" 
			:negative-top="200" 
			title="可回收物详情" 
			@confirm="confirmEditData"
			@cancel="cancelEditData">
			<scroll-view :scroll-y="true" class="slot-content" style="max-height: 80vh;">
				<u-form label-width="180rpx">
					<u-form-item label="名称">
						<u-input placeholder="请输入可回收物名称" border v-model="form.name"/>
					</u-form-item>
					<u-form-item label="归属类型" v-if="typeId == 0">
						<u-input v-model="form.typeName" placeholder="请选择归属类型" type="select" border @click="typeChooseVisible = true" />
					</u-form-item>
					<u-form-item label="减碳量百分比">
						<u-input placeholder="请输入减碳量百分比" type="number" inputmode="decimal" border v-model="form.carbon"/>
					</u-form-item>
					<u-form-item label="排序">
						<u-input placeholder="请输入排序" type="number" inputmode="decimal" border v-model="form.sort"/>
					</u-form-item>
					<u-form-item label="默认上门价">
						<u-input placeholder="请输入默认上门价" type="number" inputmode="decimal" border v-model="form.onsiteprice.price"/>
					</u-form-item>
					<u-form-item label="是否允许修改上门价" :label-style="{'line-height': '1.4em'}">
						<u-switch v-model="form.onsiteprice.edit" size="40"></u-switch>
					</u-form-item>
					<u-form-item label="上门最低价" v-if="form.onsiteprice.edit">
						<u-input placeholder="请输入上门最低价" type="number" inputmode="decimal" border v-model="form.onsiteprice.minprice"/>
					</u-form-item>
					<u-form-item label="上门最高价" v-if="form.onsiteprice.edit">
						<u-input placeholder="请输入上门最高价" type="number" inputmode="decimal" border v-model="form.onsiteprice.highprice"/>
					</u-form-item>
					
					<u-form-item label="默认站点价">
						<u-input placeholder="请输入默认站点价" type="number" inputmode="decimal" border v-model="form.storeprice.price"/>
					</u-form-item>
					<u-form-item label="是否允许修改站点价" :label-style="{'line-height': '1.4em'}">
						<u-switch v-model="form.storeprice.edit" size="40"></u-switch>
					</u-form-item>
					<u-form-item label="站点最低价" v-if="form.storeprice.edit">
						<u-input placeholder="请输入站点最低价" type="number" inputmode="decimal" border v-model="form.storeprice.minprice"/>
					</u-form-item>
					<u-form-item label="站点最高价" v-if="form.storeprice.edit">
						<u-input placeholder="请输入站点最高价" type="number" inputmode="decimal" border v-model="form.storeprice.highprice"/>
					</u-form-item>
					<u-form-item label="预估出库价">
						<u-input placeholder="请输入预估出库价" type="number" inputmode="decimal" border v-model="form.packprice"/>
					</u-form-item>
					<u-form-item label="按件估重(选填)">
						<u-input placeholder="请输入按件估重的重量" type="number" inputmode="decimal" border v-model="form.packprice"/>
					</u-form-item>
					<u-form-item label="备注">
						<u-input placeholder="请输入备注" border v-model="form.remarks" type="textarea"/>
					</u-form-item>
				</u-form>
			</scroll-view>
		</u-modal> -->
		
		<!-- 选择目录 -->
		<!-- <u-popup v-model="typeChooseVisible" mode="bottom" length="100%">
			<view class="u-flex u-p-30">
				<view @click="typeChooseVisible = false"><text>取消</text></view>
				<view class="u-flex-1 u-text-center"><text>选择归属类型</text></view>
				<view @click="chooseType"><text class="link">确定</text></view>
			</view>
			<multi-select 
				:options="treeData" 
				:load-data="loadChildrenData"
				v-model="selected"
			/>
		</u-popup> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name:"product-list",
		props:{
			typeId:{
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				list: [],
				show: false,
				key: '',
				// 新建表单
				form: {
					"typeid":0,
					"id": 0,
					"name": "",
					"carbon": null,
					"pic": "",
					"sort": null,
					"packprice": null,
					"isweighing": true,
					"onsiteprice": {
						"edit": true,
						"price": null,
						"minprice": null,
						"highprice": null
					},
					"storeprice": {
						"edit": true,
						"price": null,
						"minprice": null,
						"highprice": null
					},
					"estimatedweight": null
				},
				typeChooseVisible: false,
				selected: {},
				treeData: [
					{
						name: '一级目录',
						id: 0,
						isChoose: false,
						isLeaf: false // 明确标记是否为叶子节点
					}
				],
			};
		},
		watch:{
			selected(val){
				console.log('selected:',val)
				this.form.typeName = val.name
				this.form.typeid = val.id
				// this.moveTo.toId = val.id
			}
		},
		computed: {
			...mapState({
				franchiseId: state => state.franchiseId,
				operatorid: state => state.operatorid
			})
		},
		mounted() {
			// if(this.typeId > 0) {
			// 	this.form.typeid = this.typeId
			// }
			this.getList()
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			getList(){
				this.$u.get('/Waste/product/List', {
					operatorid: this.operatorid,
					"typeId": this.typeId,
					"key": this.key
				}).then((res) => {
					let datas = res;
					datas.forEach((item) => {
						if (item.usestate == '已启用') {
							item.state = true
						} else {
							item.state = false
						}
					})
					this.list = datas;
				}).finally(() => {
					this.loading = false;
				})
			},
			//修改状态
			switchState(event, item) {
				this.$u.post(`/Waste/Product/Edit`, {
					...item,
					usestate: event ? 2 : 1
				}).then((res) => {
					if (res.status == 0) {
						uni.showToast({
							title: res.msg
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch((err) => {
					this.getList()
				})
			},
			// 删除可回收物
			del(id){
				uni.showModal({
					title: '提示',
					content: "此操作将永久删除该可回收物, 是否继续?",
					success: (res)=> {
						if (res.confirm) {
							this.$u.get('/Waste/Product/Delete', {
								id: id
							}).then((res) => {
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
								this.getList();
							})
						} else if (res.cancel) {
							
						}
					}
				})
			},
			// 创建
			createProduct(){
				uni.navigateTo({
					url: '/pages/admin/productList/create/create'
				})
			},
			// 发起修改
			edit(obj){
				// this.$set(this.form,'id',item.id)
				// this.$set(this.form,'name',item.name)
				// this.$set(this.form,'typeid',item.typeid)
				// this.$set(this.form,'sort',item.sort)
				// this.$set(this.form,'remarks',item.remarks)
				// this.$set(this.form,'usestate',item.usestate)
				this.form = {
					id: obj.id,
					typeid: obj.typeid,
					name: obj.name,
					typename: obj.typename,
					carbon: obj.carbon,
					isweighing: obj.isweighing,
					sort: obj.sort,
					packprice: obj.packprice,
					onsiteprice: {
						edit: obj.editonsiteprice,
						price: obj.onsiteprice,
						minprice: obj.onsiteminprice,
						highprice: obj.onsitehighprice
					},
					storeprice: {
						edit: obj.editstoreprice,
						price: obj.storeprice,
						minprice: obj.storeminprice,
						highprice: obj.storehighprice
					},
					estimatedweight: obj.estimatedweight,
					remarks: obj.remarks,
					usestate: obj.usestate,
					hasTypeId: this.typeId
				}
				this.$store.commit('setProductItem', this.form)
				uni.navigateTo({
					url: '/pages/admin/productList/edit/edit'
				})
				// this.show = true
			},
			// 确认修改
			confirmEditData(){
				this.$u.post('/Waste/Product/Edit', this.form).then((res) => {
					this.show = false
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					this.getList()
				})
			},
			cancelEditData(){
				this.form = {
					typeid: 0,
					name: "",
					sort: 0,
					remarks: "",
					typeName: "",
					typeid: 0
				}
			},
			// 选择归属类型
			chooseType(){
				this.typeChooseVisible = false
			},
			async loadChildrenData(node) {
				try {
					const res = await this.$u.get('/Waste/product/List', {
						operatorid: this.operatorid,
						pid: node.id,
						key: node.key
					})
					return res.map(item => ({
						...item,
						// isLeaf: item.levelType === 4 // 根据业务逻辑判断是否为末级
					})).filter((cell)=>cell.usestate == '已启用')
				} catch (e) {
					this.$u.toast('加载失败')
					return []
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table-list{
		background-color: #fff;
		padding: 0 20rpx;
		.tr{
			display: flex;
			align-items: center;
			&:active{
				opacity: 0.6;
			}
			.th{
				flex: 1;
				color: $u-tips-color;
				font-size: 24rpx;
				line-height: 3em;
			}
			.td{
				flex: 1;
				padding: 24rpx 0;
			}
		}
		.links{
			color: $u-color-blue;
			border-bottom: 1px solid $u-color-blue;
		}
		.divider{
			border-right: 1px solid $u-border-color;
			height: 14px;
			padding-left: 8px;
			margin-right: 8px;
		}
	}
	.slot-content{
		padding: 30rpx;
	}
</style>